<template>
  <a-drawer
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增商圈' : '修改商圈'"
    width="40%"
    :body-style="{ paddingBottom: '50px' }"
    :maskClosable="false"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules" :wrapper-col="{span: 22}">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="机构" name="agentNo">
            <GzTreeSelect ref="gzThreeRef" v-model:value="vdata.saveObject['agentNo']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="商圈名称" name="groupName">
            <a-input v-model:value="vdata.saveObject['groupName']" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="商圈类型" name="groupType">
            <!-- 0商业综合体  1商务综合体  2生活综合体 3菜市场  4批发市场 -->
            <a-select v-model:value="vdata.saveObject['groupType']" placeholder="请选择">
              <a-select-option :value="0">
                商业综合体
              </a-select-option>
              <a-select-option :value="1">
                商务综合体
              </a-select-option>
              <a-select-option :value="2">
                生活综合体
              </a-select-option>
              <a-select-option :value="3">
                菜市场
              </a-select-option>
              <a-select-option :value="4">
                批发市场
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="商圈头像" name="groupImg">
            <GzUpload v-model:src="vdata.saveObject['groupImg']" bizType="upload" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="商圈描述" name="groupDes" :wrapper-col="{span: 23}">
            <a-textarea v-model:value="vdata.saveObject['groupDes']" :rows="3" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider orientation="left" orientationMargin="0">商圈中心点【必选】</a-divider>
      <!-- 引入地图组件  -->
      <GzAmap ref="gzAmapRef" />
      <a-divider />
      <a-row>
        <a-col :span="24">
          <a-form-item label="辐射范围" name="radius">
            <a-input-number v-model:value="vdata.saveObject['radius']" :step="100" addon-before="距离商圈中心点" addon-after="米" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="24">
          <a-form-item label="导入权限" name="hasImport">
            <a-checkbox-group v-model:value="vdata.saveObject['hasImport']" :options="vdata.plainOptions" />
          </a-form-item>
        </a-col> -->

        <a-col :span="24">
          <a-form-item label="是否启用" name="state">
            <!-- <a-switch v-model:checked="checked" /> -->
            <a-radio-group v-model:value="vdata.saveObject['state']">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="0">停用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import{$addorUpdataBusiness,$getBusinessInfo}from '@/api/businessCircle/index'
import {ref, reactive, nextTick, getCurrentInstance} from 'vue'
const { $infoBox  } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})
  
const vdata : any =  reactive({
  isAdd: true, // 新增 or 修改
  visible: false, // 抽屉开关
  saveObject: {}, // 数据对象
  btnLoading:false,
  plainOptions:[
    {label:'省级权限',value:'1'},
    {label:'市级权限',value:'2'},
    {label:'区县级权限',value:'3'},
    {label:'网点权限',value:'4'},
    {label:'客户经理权限',value:'5'}
  ],
  rules: {
    agentNo: [{ required: true, message: '请选择归属机构', trigger: 'blur' }],
    groupName: [{ required: true, message: '请输入商圈名称', trigger: 'blur' }],
    groupType: [{ required: true, message: '请选择商圈类型', trigger: 'blur' }],
    groupImg: [{ required: true, message: '请上传商圈头像', trigger: 'blur' }],
    radius: [{ required: true, message: '请输入辐射范围', trigger: 'blur' }],
    hasImport: [{ required: true, message: '请选择导入权限', trigger: 'blur' }],
    state: [{ required: true, message: '请选择类型', trigger: 'blur' }],
  }
})

// 表单组件
const infoFormModel = ref()
const gzAmapRef = ref()

// 抽屉显示
const show = (appId) => {
  
  vdata.isAdd = !appId
  vdata.appId = appId
  // 数据清空--添加默认值
  vdata.saveObject = {
    'state': 1,
    radius:1500,
    // hasImport:['1','2','3','4','5']
  }

  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  let initMapData : any = {}

  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    // 拉取详情
    $getBusinessInfo({ groupNo: appId }).then(res => {
      // 商圈的位置信息包含了区域编码
      if(res.areaCode && res.areaCode.length){
        initMapData.areacode = JSON.parse(res.areaCode)
        initMapData.lnglat = res.location.longitude + ',' + res.location.latitude
        initMapData.address = res.address
        initMapData.areacodeNames = JSON.parse(res.areaName)
      }

      // 显示地图信息
      nextTick(() => gzAmapRef.value.init(initMapData))
      vdata.saveObject={
        // sqlxNo: 'SQLX00001',
        // sqlxName: '商业综合体',
        // state:1,
        ...res
      }
    })
    vdata.visible = true
  } else {

    vdata.visible = true // 展示弹层信息
    // 显示地图信息
    nextTick(() => gzAmapRef.value.init(initMapData))
  }

}
// 表单提交
const onSubmit = () => {
  let mapData = gzAmapRef.value.getMapData()
  if (!mapData || mapData.areacode.length == 0 || !mapData.address || !mapData.lnglat) {
    return $infoBox.message.error('请选择地理位置')
  }
  if (mapData.lnglat.indexOf(',') < 0) {
    return $infoBox.message.error('请输入正确的经纬度')
  }
  vdata.saveObject.location ={
    longitude:mapData.lnglat.split(',')[0],
    latitude:mapData.lnglat.split(',')[1]
  }
  vdata.saveObject.address = mapData.address
  vdata.saveObject.areaCode = JSON.stringify(mapData.areacode)
  vdata.saveObject.areaName = JSON.stringify(mapData.areacodeNames)
  infoFormModel.value.validate().then(() => {

    vdata.btnLoading = true
    let reqObject = Object.assign({}, vdata.saveObject) // 请求数据
    let URL = vdata.isAdd ? '/api/mchGroup/save' : '/api/mchGroup/update'
    $addorUpdataBusiness(URL,reqObject).then(res => {
      vdata.visible = false
      props.callbackFunc() // 刷新列表
      vdata.btnLoading = false
    }).finally(() => {
       vdata.btnLoading = false
    })
  })
}


const onClose = () => {
  vdata.visible = false
}

defineExpose({ show })
</script>

